<template>
  <div>
    <el-dialog
      :visible.sync="dialog.add"
      :close-on-click-modal="false"
      title="添加"
      width="80%"
      append-to-body
      @closed="dialogClosed('addForm')"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="手机号" prop="userPhone">
              <el-input v-model="form.userPhone" placeholder="请输入手机号" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'UserMain'
                })"
              >选择手机号</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="昵称" prop="userNickname">
              <el-input v-model="form.userNickname" placeholder="请输入昵称" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'UserMain'
                })"
              >选择昵称</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="头像地址" prop="userHeadicon">
              <UploadImage
                v-if="dialog.add"
                action="/user-detail/admin/upload-headicon/"
                form-prop="userHeadicon"
                :file-list="[]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="性别" prop="userGender">
              <el-select
                v-model="form.userGender"
                placeholder="请选择性别"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.userGenderSelect"
                  :key="item.value"
                  :value="item.value"
                  :label="item.displayValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="请输入生日"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="所在地" prop="location">
              <el-input v-model="form.location" placeholder="请输入所在地" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="form.qq" placeholder="请输入QQ号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="QQ二维码" prop="qqQrcode">
              <UploadImage
                v-if="dialog.add"
                action="/user-detail/user/upload-qq-qrcode"
                form-prop="qqQrcode"
                :file-list="[]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="微信号" prop="wechat">
              <el-input v-model="form.wechat" placeholder="请输入微信号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="微信二维码" prop="wechatQrcode">
              <UploadImage
                v-if="dialog.add"
                action="/user-detail/user/upload-wx-qrcode"
                form-prop="wechatQrcode"
                :file-list="[]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="支付宝账号" prop="alipay">
              <el-input v-model="form.alipay" placeholder="请输入支付宝账号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="支付宝二维码" prop="alipayQrcode">
              <UploadImage
                v-if="dialog.add"
                action="/user-detail/user/upload-ali-qrcode"
                form-prop="alipayQrcode"
                :file-list="[]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="分享码" prop="shareCode">
              <el-input v-model="form.shareCode" placeholder="请输入分享码" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="add">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="修改"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="手机号" prop="userPhone">
              <el-input v-model="form.userPhone" placeholder="请输入手机号" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'UserMain'
                })"
              >选择手机号</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="昵称" prop="userNickname">
              <el-input v-model="form.userNickname" placeholder="请输入昵称" disabled clearable />
              <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'UserMain'
                })"
              >选择昵称</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="头像地址" prop="userHeadicon">
              <UploadImage
                v-if="dialog.edit"
                action="/user-detail/admin/upload-headicon/"
                form-prop="userHeadicon"
                :file-list="[{url: form.userHeadicon ? form.userHeadicon.indexOf('http') >= 0 ? form.userHeadicon: resUrl + form.userHeadicon: ''}]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="性别" prop="userGender">
              <el-select
                v-model="form.userGender"
                placeholder="请选择性别"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.userGenderSelect"
                  :key="item.value"
                  :value="item.value"
                  :label="item.displayValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="请输入生日"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="所在地" prop="location">
              <el-input v-model="form.location" placeholder="请输入所在地" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="form.qq" placeholder="请输入QQ号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="QQ二维码" prop="qqQrcode">
              <UploadImage
                v-if="dialog.edit"
                action="/user-detail/user/upload-qq-qrcode"
                form-prop="qqQrcode"
                :file-list="[{url: form.qqQrcode ? form.qqQrcode.indexOf('http') >= 0 ? form.qqQrcode: resUrl + form.qqQrcode: ''}]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="微信号" prop="wechat">
              <el-input v-model="form.wechat" placeholder="请输入微信号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="微信二维码" prop="wechatQrcode">
              <UploadImage
                v-if="dialog.edit"
                action="/user-detail/user/upload-wx-qrcode"
                form-prop="wechatQrcode"
                :file-list="[{url: form.wechatQrcode ? form.wechatQrcode.indexOf('http') >= 0 ? form.wechatQrcode: resUrl + form.wechatQrcode: ''}]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="支付宝账号" prop="alipay">
              <el-input v-model="form.alipay" placeholder="请输入支付宝账号" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="支付宝二维码" prop="alipayQrcode">
              <UploadImage
                v-if="dialog.edit"
                action="/user-detail/user/upload-ali-qrcode"
                form-prop="alipayQrcode"
                :file-list="[{url: form.alipayQrcode ? form.alipayQrcode.indexOf('http') >= 0 ? form.alipayQrcode: resUrl + form.alipayQrcode: ''}]"
                @imgUploadSuccess="imgUploadSuccess"
                @imgRemoveSuccess="imgRemoveSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="分享码" prop="shareCode">
              <el-input v-model="form.shareCode" placeholder="请输入分享码" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" :loading="loading.edit" @click="edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'UserDetailAddEdit',
  components: {
    UploadImage,
    Tinymce,
  },
  data() {
    return {
      dialog: {
        add: false,
        edit: false,
      },
      loading: {
        add: false,
        edit: false,
      },
      form: {
        userPhone: undefined,
        userNickname: undefined,
        userHeadicon: undefined,
        userGender: undefined,
        userIsActive: undefined,
        birthday: undefined,
        location: undefined,
        qq: undefined,
        qqQrcode: undefined,
        wechat: undefined,
        wechatQrcode: undefined,
        alipay: undefined,
        alipayQrcode: undefined,
        shareCode: undefined,
      },
      validateRules: {
        userPhone: [
          {
            type: 'string',
            min: 1,
            max: 11,
            message: '必须1-11个字符',
            trigger: 'blur',
          },
        ],
        userNickname: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        userHeadicon: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        userIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        location: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        qq: [
          {
            type: 'string',
            min: 1,
            max: 20,
            message: '必须1-20个字符',
            trigger: 'blur',
          },
        ],
        qqQrcode: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        wechat: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        wechatQrcode: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        alipay: [
          {
            type: 'string',
            min: 1,
            max: 100,
            message: '必须1-100个字符',
            trigger: 'blur',
          },
        ],
        alipayQrcode: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        shareCode: [
          {
            type: 'string',
            min: 1,
            max: 36,
            message: '必须1-36个字符',
            trigger: 'blur',
          },
        ],
      },
      dataDictCodes: ['GENDER_TYPE', 'YES_NO'],
      selects: {
        userGenderSelect: [],
        userIsActiveSelect: [],
      },
      resUrl: resUrl,
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'GENDER_TYPE',
              formProp: 'userGender',
              dataProp: 'userGenderSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'userIsActive',
              dataProp: 'userIsActiveSelect',
            })
          }
        })
        .catch((error) => {})
    },
    dialogClosed(formRef) {
      this.$refs[formRef].resetFields()
      for (const key in this.form) {
        this.form[key] = undefined
      }
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    imgUploadSuccess(formProp, url) {
      this.form[formProp] = url
    },
    imgRemoveSuccess(formProp) {
      this.form[formProp] = undefined
    },
  },
}
</script>

<style>
</style>
